<template>
  <section>
    <d2-container type="full" v-if="!show.edit&&!show.view">
      <section class="data-list-box">
       
        <div class="table-operate">
          <table-field-filter :fields="fields" @showChange="updataKey +=1"/>
          <mk-table-button
            dis-delete
            :dis-add="!permBtn.createButton"
            @add="goEdit"
             :disDelete="!permBtn.deleteButton"
            @delete="deleteBatch"
          >
            <el-button size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
          </mk-table-button>
        </div>
        <mk-el-table @sort="sortChange" :datas="datas" :key="updataKey" :height="tableHeight" @select="tableSelect" @select-all="tableSelectAll"
                     :loadingText="loading.text"
                     :loading="loading.list">
          <template v-for="field in fields" v-if="field.show">
             <el-table-column v-if="field.key=='checkBox'" :align="field.align" type="selection"></el-table-column>
             <el-table-column v-else-if="field.key=='show'" :align="field.align"
                             :sortable="field.enableSort?'custom':false" :label="field.name"
                             :width="field.width" :fixed="field.fixed">
                        <template slot-scope="scope">
                            <el-tag v-if="!scope.row.show" type="info">否</el-tag>
                            <el-tag v-else type="success">是</el-tag>
                        </template>
            </el-table-column>
            <el-table-column v-else-if="field.key=='toolButton'" :align="field.align" :label="field.name"
                             :width="field.width" :fixed="field.fixed">
              <template slot-scope="scope">
                <mk-tool-button @view="goView(scope.row)"
                                :dis-delete="!permBtn.deleteButton"
                                :dis-edit="!permBtn.updateButton"
                                @edit="goEdit(scope.row)"
                                @delete="goDelete(scope.row)">
                </mk-tool-button>
              </template>
            </el-table-column>
            
            <el-table-column
              v-else
              show-overflow-tooltip
              :prop="field.key"
              :align="field.align"
              :label="field.name"
              :width="field.width"
              :sortable="field.enableSort?'custom':false"
              :fixed="field.fixed"
              :header-align="field.headerAlign"
            ></el-table-column>
          </template>

        </mk-el-table>
        <mk-pagination :current-page="query.offset" :page-size="query.limit"
                       :data-size="temp.dataSize" @go="goPage" @changePageSize="changePageSize"/>
      </section>
    </d2-container>


  </section>
</template>

<script>

import Tools from "@/libs/utils.tool";

import {getProjectList,projectDelete} from "@/api/modules/sys.personal.project.api";

import util from "@/libs/util";
import getProjectInfo from "./modules/getProjectInfo.vue";
import viewProjectInfo from "./modules/viewProjectInfo.vue";
export default {
  name: 'dir-sort-info',
    components: {getProjectInfo,viewProjectInfo},
  data() {
    return {
      show: {
        edit: false,
        view: false
      },
      updateData: {},
      type: '',
      updataKey: 0,
      heightL: 580,
      tableHeight: 580,
      //查询条件
      query: {
        params: {},
        limit: 15,//每页显示条数
        offset: 1,//页码
        sort: {
          prop: 'startTime',
          order: 'desc',
        }
      },
      permBtn:{
        createButton:false,
        queryButton:false,
        deleteButton:false,
        updateButton:false,
      },
      selectData:[],
      //返回数据列表
      datas: [],
      //临时变量
      temp: {
        //数据总调数
        dataSize: 0,
        //当前选中的id
        id: '',
        //
        item: []
      },
      //汇总数据
      totals: [],
      //加载中效果
      loading: {
        //获取列表数据中
        list: false,
        text: '加载中'
      },
      item_data: {},
      //列表渲染数据列
      fields: [
          {key: 'checkBox', name: '全选按钮', show: true, enableSort: false, fixed: false},
        {key: 'name', name: '项目名称', show: true, align: "left", enableSort: false, fixed: false,headerAlign:"center", width: '250'},
        { key: 'startTime', name: '项目开始时间', show: true, align: "center", enableSort: false, fixed: false, width: '100' },
        { key: 'endTime', name: '项目结束时间', show: true, align: "center", enableSort: false, fixed: false, width: '100' },
        { key: 'show', name: '是否有效', show: true, align: "center", enableSort: false, fixed: false , headerAlign:"center",width: '80'},
        { key: 'description', name: '描述', show: true, align: "left", enableSort: false, fixed: false ,headerAlign:"center",},
        {key: 'duty', name: '职责', show: true, align: "left", enableSort: false, fixed: false,headerAlign:"center",},
        {key: 'toolButton', name: '操作', show: true, align: "center", width: '220', enableSort: false, fixed: 'right'},
      ]
    }
  },
  watch: {
    'heightL'(val) {
      this.updataKey += 1
      this.tableHeight = val
    },
  },
  mounted() {
    this.getWinHeight()
    this.getDataList();
    this.getPerms()
    this.selectData = []
  },
  methods: {
    getPerms() {
       // let perms = this.$store.state.d2admin.perms.permsArr
      let perms =JSON.parse(util.cookies.get('permMenus'))
      if (perms.includes('*')) {
        this.permBtn.createButton = true;
        this.permBtn.queryButton = true;
        this.permBtn.deleteButton = true;
        this.permBtn.updateButton = true;
      } else {
        if (perms.includes('POST /api/private/project/create')) {
          this.permBtn.createButton = true;
        }
        if (perms.includes('POST /api/private/project/list')) {
          this.permBtn.queryButton = true;
        }
        if (perms.includes('POST /api/private/project/update')) {
          this.permBtn.updateButton = true;
        }
        if (perms.includes('POST /api/private/project/delete')) {
          this.permBtn.deleteButton = true;
        }
      }
    },
    
    //获取窗口高度
    getWinHeight() {
      let that = this
      this.heightL = window.innerHeight - 320
      window.addEventListener('resize', () => {
        that.updataKey += 1
        that.heightL = window.innerHeight - 320
      })
    },
    getDataList() {
      try {
        this.loading.list = true;
        getProjectList(this.query).then(res => {
          let datas = res.data || []
          for (const data of datas) {
            //时间格式化
            data.createdAt = data.createdAt && Tools.fmtLong2DateTime(data.createdAt)
            data.updatedAt = data.updatedAt && Tools.fmtLong2DateTime( data.updatedAt )
            data.startTime = data.startTime && Tools.timestampToTime( data.startTime, 'YM' )
            data.endTime = data.endTime && Tools.timestampToTime( data.endTime, 'YM' )
            
          }
          this.datas = datas;
          this.temp.dataSize = res.count;
          this.loading.list = false;
        })
      } catch (err) {
        this.$message.error('数据加载失败')
        this.loading.list = false;
      }
    },
    tableSelectAll(e) { 
      this.selectData = e
    },
    tableSelect(e) { 
       this.selectData = e
    },
    deleteBatch() { 
      if ( this.selectData.length == 0 ) {
        this.$toast.warning('请选择需要删除的数据')
        return
      } else { 
        this.$toast.confirm('批量删除所选项目, 是否继续?').then(() => {
          projectDelete( this.selectData.map( v => { return v.id } )).then(res => {
          this.$toast.success('批量删除成功')
          this.getDataList()
        }).catch(err => {
          console.log(err)
        })
      });

      }
    },
    goDelete(data) {
      this.$toast.confirm('此操作将永久删除该项目, 是否继续?').then(() => {
        projectDelete(data.id).then(res => {
          this.$toast.success('删除成功')
          this.getDataList()
        }).catch(err => {
          console.log(err)
        })
      });

    },
    close() {
      this.show.edit = false
      this.show.view = false
      this.getDataList()
    },
    //跳到页
    goPage(pageNum) {
      this.query.offset = pageNum
      //查询数据
      this.getDataList();
    },
    //改变每页数据量
    changePageSize(size) {
      this.query.limit = size;
      this.query.offset = 1;
      this.getDataList();
    },
    //重置查询条件
    resetQuery(formName) {
      this.$refs[formName].resetFields();
      this.goPage(1);
    },
//    排序
    sortChange(row) {
      this.query.sort.order = row.order === 'ascending' ? 'asc' : 'desc'
      this.query.sort.prop = row.prop
      this.getDataList()
    },
//添加编辑
      goEdit( data ) {
          let dt = data && data.id ? JSON.parse( JSON.stringify( data ) ) : {}
        this.$toast.showBigModal(dt && dt.id ? '修改项目' : '增加项目', getProjectInfo, {updateData: dt}, data => {
        if (data) {
          this.getDataList()
        }
      })
    },
//跳转到查看详情
    goView(data) {
     this.$toast.showBigModal('查看项目', viewProjectInfo, {viewData: data || {}}, data => {
        // console.log(data)
      })
    }
  }
}
</script>

<style scoped>

</style>
